<script setup>
import {goAnnouncementDetails, goBack} from "../../tools/go";
import {ref,computed} from 'vue'
import {getAllAnnouncement, getAnnouncement} from "../../api/announcement";
import {getUserId} from "../../store";


const activeItem = ref('全部') // 用于存储当前选中的项


const annList = ref([])


const annFilter = computed(() => {
  return annList.value.filter((ann) => {
    if (activeItem.value === '全部') {
      return annList.value
    }

    if (activeItem.value === '未读') {
      return !ann.lookUser.includes(getUserId() + '')
    }

    if (activeItem.value === '已读') {
      return ann.lookUser.includes(getUserId() + '')
    }

})})

const annPage = {
  page: 1,
  size: 10,
  total: 0,
  pageYs: 0,
  pageYe: 0
}

const handClick = (item) => {
  goAnnouncementDetails(item.id)

  annList.value.forEach(a => {
    if (item.id === a.id) {
      a.lookUser.push(getUserId() + '')
    }
  })
}

const init = () => {
  getAllAnnouncement(annPage.page, annPage.size).then(res => {
      annList.value = res.data.records
  })
}

init()

</script>

<template>

  <view class="back">
    <view class=""></view>
    <view class="titli">
      <v-icon @click="goBack()" class="icon" icon="mdi-chevron-left"></v-icon>
      <h3>社区公告</h3>
    </view>
    <view class="nav">
      <ul>
        <li @click="activeItem = '全部'" :class="{ active: activeItem === '全部' }">全部</li>
        <li @click="activeItem = '未读'" :class="{ active: activeItem === '未读' }">未读</li>
        <li @click="activeItem = '已读'" :class="{ active: activeItem === '已读' }">已读</li>
      </ul>
    </view>
    <!-- 通知  -->
    <scroll-view scroll-y>

      <view class="tz-box" v-for="i in annFilter" @click="handClick(i.id)">
        <view class="tz">
          <h4>{{i.title.substring(0, 15)}}</h4>
          <h3>{{i.lookUser.includes(getUserId() + '') ? '已读' : '未读'}}</h3>
        </view>

        <view class="nr">
          <text>{{i.content.substring(0, 20)}}}</text>
        </view>

        <view class="tiem">
          <view>
            <v-icon class="icon" icon="mdi-clock-time-four-outline"></v-icon>
            <text>{{i["publicTime"]}}</text>
          </view>
          <h4>查看详情</h4>
        </view>
      </view>
    </scroll-view>
  </view>
  
</template>

<style scoped lang="scss">
@use "../../static/css/main";

.back {
  @include main.useTheme() {
    //通知
    .tz-box{
      .tiem{
        h4{
          color: #64666c;
          font-weight: 500;
          font-size: 3vw;
        }
        view{
          .icon{
            font-size: 20px;
          }
          text{
            margin-left: 4px;
            font-size: 14px;
          }
          display: flex;
          align-items: center;
        }
        width: 100%;
        height: 50px;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .nr{
        width: 100%;
        word-break: break-all;
        word-wrap: break-word;
        padding: 12px;
        border-bottom: 3px solid main.getVal("primary_border_color");
      }
      .tz{
        h4{
          font-size: 20px;
          font-weight: 500;
        }
        h3{
          color: #73d2a7;
          font-size: 3vw;
          font-weight: 500;
        }
        width: 100%;
        height: 50px;
        padding: 12px;
        border-bottom: 3px solid main.getVal("primary_border_color");
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      width: 97%;
      background: main.getVal("one_lv_bg_color");
      border-radius: 12px;
      margin: 20px auto;
    }
    //nav
    .nav {
      ul {
        li {
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer; /* 添加鼠标指针样式 */
          &.active {
            color: #E07320;
            font-weight: 500;
            border-bottom: 4px solid #E07320;
            margin-top: 5px;
          }
        }
        display: flex;
        align-items: center;
        width: 90%;
        height: 50px;
        border-radius: 29px;
        margin: 0 auto;
        background: main.getVal("one_lv_bg_color");
        justify-content: space-around;
      }
      width: 100%;
      //height: 120px;
      margin: 10px auto;
    }
    //标题
    .titli {
      h3 {
        font-weight: 400;
        color: main.getVal("primary_text_color");
        text-align: center;
      }
      .icon {
        position: absolute; /* 将 icon 脱离文档流 */
        left: 10px;
        font-size: 30px;
      }
      position: relative; /* 父容器设置为相对定位 */
      display: flex;
      align-items: center; /* 垂直居中 */
      justify-content: center; /* 水平居中 */
      width: 100%;
      height: 8vh;
      background: main.getVal("primary_bg_color");
    }

    * {
      margin: 0;
      padding: 0;
      list-style: none;
      text-decoration: none;
    }
  }
}
</style>